<template>
  <tm-form
    :model-value="formData"
    layout="horizontal"
    :margin="[0]"
    :padding="[0, 0]"
    :border="false"
    :label-align="'left'"
    :transparent="true"
    @submit="handleSubmit"
  >
    <Card title="企业基本信息" :title-font-size="'36rpx'" :padding="[32]" :show-divider="false">
      <view class="hb-flex hb-flex-col hb-gap-3 hb-mt-6">
        <tm-form-item
          required
          label=""
          field="enterpriseLicenseImage"
          :border="true"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          :errorLabel="''"
          :rules="[
            {
              required: true,
              message: '请上传营业执照照片',
            },
          ]"
        >
          <view class="hb-text-sm hb-mb-3">上传营业执照照片</view>
          <view class="hb-flex hb-gap-3">
            <CredentialUpload
              v-model:img="formData.enterpriseLicenseImage"
              :bg-img-key="'registrationCertificate'"
            />
          </view>
        </tm-form-item>

        <tm-form-item
          label="企业名称"
          field="enterpriseName"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          :errorLabel="''"
          :border="true"
          required
          :rules="[
            {
              required: true,
              message: '请输入企业名称',
            },
          ]"
        >
          <TmInput
            v-model.trim="formData.enterpriseName"
            :height="40"
            :font-size="28"
            :input-padding="[16, 16]"
            placeholder="请输入企业名称"
            :transparent="true"
          />
        </tm-form-item>

        <tm-form-item
          label="法人姓名"
          field="enterpriseLegalPerson"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          :errorLabel="''"
          :border="true"
          required
          :rules="[
            {
              required: true,
              message: '请输入法人姓名',
            },
          ]"
        >
          <TmInput
            v-model.trim="formData.enterpriseLegalPerson"
            :height="40"
            :font-size="28"
            :input-padding="[16, 16]"
            placeholder="请输入法人姓名"
            :transparent="true"
          />
        </tm-form-item>

        <tm-form-item
          label="注册号"
          field="enterpriseRegistrationNumber"
          :border="true"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          :errorLabel="''"
          required
          :rules="[
            {
              required: true,
              message: '请输入注册号',
            },
          ]"
        >
          <TmInput
            v-model.trim="formData.enterpriseRegistrationNumber"
            :height="40"
            :font-size="28"
            :input-padding="[16, 16]"
            placeholder="请输入社会统一信用代码"
            :transparent="true"
          />
        </tm-form-item>

        <tm-form-item
          label="注册地址"
          field="enterpriseRegistrationAddress"
          :border="true"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          :errorLabel="''"
          required
          :rules="[
            {
              required: true,
              message: '请输入注册地址',
            },
          ]"
        >
          <TmInput
            v-model.trim="formData.enterpriseRegistrationAddress"
            :height="40"
            :font-size="28"
            :input-padding="[16, 16]"
            placeholder="按企业注册地址填写"
            :transparent="true"
          />
        </tm-form-item>

        <tm-form-item
          required
          label="营业期限"
          field="enterpriseBusinessPeriod"
          :border="true"
          align="left"
          :margin="[0, 0]"
          :padding="[0]"
          :errorLabel="''"
          :rules="[
            {
              required: true,
              message: '请选择营业期限',
            },
          ]"
        >
          <tm-time-picker
            v-model:model-str="formData.enterpriseBusinessPeriod"
            :defaultValue="formData.enterpriseBusinessPeriod"
            :showDetail="showDetail"
            :immediate-change="true"
            format="YYYY-MM-DD"
            start="1949/6/15 00:00:00"
            end="2099/12/31 23:59:59"
            :transparent="true"
          >
            <tm-text
              v-if="formData.enterpriseBusinessPeriod"
              :label="formData.enterpriseBusinessPeriod"
            ></tm-text>
            <tm-text v-else color="#999996" :label="'请选择营业执照有效期'"></tm-text>
          </tm-time-picker>
        </tm-form-item>
      </view>
    </Card>
    <BottomSubmit submit-btn-label="提交认证信息" :submitLoading="loading" />
  </tm-form>
</template>

<script lang="ts" setup>
  import { EnterpriseRealNameAuth } from '@/api/realNameAuth/type';
  import CredentialUpload from './CredentialUpload.vue';
  import { botCertificationCertify } from '@/api/realNameAuth';
  import { AuthTypeEnum } from '@/enums/LoginEnum';
  import Card from './Card/index.vue';
  import { useUserStore } from '@/store/modules/user';
  const userStore = useUserStore();
  const showDetail = {
    year: true,
    month: true,
    day: true,
    hour: false,
    minute: false,
    second: false,
  };
  const props = defineProps<{
    enterpriseRealNameAuth: EnterpriseRealNameAuth;
  }>();
  const formData = reactive<EnterpriseRealNameAuth>({} as EnterpriseRealNameAuth);

  watch(
    () => props.enterpriseRealNameAuth,
    (value) => {
      formData.enterpriseLicenseImage = value?.enterpriseLicenseImage;
      formData.enterpriseName = value?.enterpriseName;
      formData.enterpriseLegalPerson = value?.enterpriseLegalPerson;
      formData.enterpriseRegistrationNumber = value?.enterpriseRegistrationNumber;
      formData.enterpriseRegistrationAddress = value?.enterpriseRegistrationAddress;
      formData.enterpriseBusinessPeriod = value?.enterpriseBusinessPeriod;
      formData.certificationType = AuthTypeEnum.ENTERPRISE;
    },
    { deep: true, immediate: true },
  );

  const loading = ref(false);
  // 提交申请
  const handleSubmit = async (e: Tmui.tmFormSubmitResult<typeof formData>) => {
    // 表单验证
    if (!e.isPass) return;
    // 防止重复提交
    if (loading.value) return;
    loading.value = true;
    // 使用表单验证
    try {
      await botCertificationCertify(formData);
      userStore.getUserInfo();
      uni.showToast({
        title: '提交认证信息成功',
        icon: 'success',
      });
      setTimeout(() => {
        redirectTo({
          name: 'realNameAuthResult',
        });
      }, 1000);
    } catch (e) {
      console.error('表单验证失败', e);
    } finally {
      loading.value = false;
    }
  };
</script>

<style lang="scss" scoped></style>
